<script setup>
    defineProps({
        title:{
            type:String
        },
        subTitle:{
            type:String
        }
    })
</script>

<template>
    <div class="home-panel">
        <div class="contanier">
            <div class="head">
              <!--一级分类-->       <!--二级分类-->
            <h3>{{ title }}<small>{{ subTitle }}</small></h3>
            </div>
            <!-- 添加分隔线 -->
            <hr class="separator" />
            <div class="body">
                <slot></slot><!--主内容区，使用插槽-->
            </div>
        </div>
    </div>
</template>

<style scoped>

.home-panel {
  background-color: #fff;
  width: 100%;
  
  .head {
    padding: 40px 0;
    display: flex;
    align-items: flex-end;

    h3 {
      flex: 1;
      font-size: 32px;
      font-weight: normal;
      margin-left: 6px;
      height: 35px;
      line-height: 35px;

      small {
        font-size: 16px;
        color: #999;
        margin-left: 20px;
      }
    }
  }
}
.separator {
  margin: 0;
  border: none;
  border-top: 1px solid #e0e0e0; /* 添加灰色分隔线 */
  width: 100%;
  height: 1px;
  margin-top:0px; /* 调整分隔线和内容之间的间距 */
  margin-bottom: 20px;
}
.contanier {
 width: 100%;
}


</style>